<template>
	<view>
		<view class="canvas"><canvas style="width: 350px; height:500px;" canvas-id="firstCanvas"></canvas></view>
		<view class="padding-xl bg-gray">
			<view class="text-bold">邀请规则</view>
			<view>1.复制注册口令包含您的邀请码信息；</view>
			<view>2.好友通过您的注册口令注册或者二维码可以直接下载进行聚链优选APP的注册</view>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="bg-white btnbottom">
			<button class="cu-btn lg bg-red margin-right-xs" style="width: 45%;" hover-class="none" @tap="copyInviteCode">复制邀请口令</button>
			<button class="cu-btn lg bg-red margin-left-xs" style="width: 45%;" hover-class="none" @tap="saveInvitePic">保存邀请海报</button>
		</view>
		<loading :loadModal="loadModal"></loading>
	</view>
</template>

<script>
var _self;
export default {
	data() {
		return {
			imgsrc: '', //保存图片的路径
			bgsrc: 'https://shop-1258649650.cos.ap-guangzhou.myqcloud.com/content/icon/tmp/bktmp.png',
			qrcodesrc: 'https://shop-1258649650.cos.ap-guangzhou.myqcloud.com/content/icon/tmp/qrcode.png',
			appurl: 'http://coinsaas.com/app/youxuan.apk',
			code: '',
			loadModal: true //蒙层
		};
	},
	onLoad() {
		_self = this;
		let objuser = _self.$util.getUserStorage();
		_self.code = objuser.inviteCode;
		_self.loadModal = true;
		setTimeout(function() {
			_self.selseimg(_self.code);
		}, 100);
	},
	methods: {
		selseimg(code) {
			let tmpcode = '邀请码:' + code;
			let len = tmpcode.length * 10;
			let zstart = parseInt((350 - len) / 2); //邀请码说明画布开始位置
			len += 40;
			let bstart = parseInt((350 - len) / 2); //邀请码背景画布开始位置
			let bend = bstart + len;
			const context = uni.createCanvasContext('firstCanvas');
			//背景海报
			context.drawImage(_self.bgsrc, 0, 0, 350, 500);

			//最上面logo 红色背景
			context.setFillStyle('#FAEFCD');
			context.fillRect(120, 0, 110, 40);
			context.fill();
			//logo
			context.drawImage('../../static/icon/logo.png', 125, 7, 25, 25);
			//app名字
			context.setFillStyle('#D03032');
			context.setFontSize(14);
			context.fillText('聚链优选', 160, 25);
			context.fill();

			//下载的地址二维码
			context.drawImage(_self.qrcodesrc, 110, 335, 131, 120);

			//我的邀请码 背景
			context.beginPath();
			context.setStrokeStyle('#FFFFFF');
			context.setLineCap('round');
			context.setLineWidth(20);
			context.moveTo(bstart, 475);
			context.lineTo(bend, 475);
			context.stroke();
			//邀请码
			context.setFillStyle('#333333');
			context.setFontSize(14);
			context.fillText(tmpcode, zstart, 480);
			context.fill();
			context.draw(false, () => {
				_self.loadModal = false;
			});
		},
		copyInviteCode() {
			let tmptext = `邀请您加入聚链优选APP，自动搜索淘宝天猫优惠券！
先领券，再购物，更划算！
-------------
聚链优选APP下载点击地址：${_self.appurl}
-------------
复制这条信息$$${_self.code}$$打开聚链优选APP，注册领取优惠券`;
			uni.setClipboardData({
				data: tmptext
			});
		},
		saveInvitePic() {
			//保存邀请海报
			_self.loadModal = true;
			uni.canvasToTempFilePath(
				{
					x: 0,
					y: 0,
					width: 350,
					height: 500,
					destWidth: 750,
					destHeight: 1071,
					canvasId: 'firstCanvas',
					success: function(res) {
						_self.loadModal = false;
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(red) {
								_self.$util.msg('成功保存邀请海报');
								/* that.imgsrc = res.tempFilePath;
								if (e == 2) {
									that.gofenxiang();
								} */
							},
							fail(res) {
								if (res.errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
									uni.showModal({
										title: '您需要授权相册权限',
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success(res) {},
													fail(res) {
														console.log(res);
													}
												});
											}
										}
									});
								}
							}
						});
					},
					fail(res) {
						_self.loadModal = false;
					}
				},
				this
			);
		},
		gofenxiang() {
			/* uni.share({
			    provider: "weixin",
			    scene: "WXSenceTimeline",
			    type: 2,
			    imageUrl:that.imgsrc,
			    success: function (res) {
			        console.log(JSON.stringify(res));
			    },
			    fail: function (err) {
			        console.log(JSON.stringify(err));
			    }
			}); */
		}
	}
};
</script>

<style>
page {
	background-color: #f1f1f1;
}

.canvas {
	display: flex;
	justify-content: center;
}

.scroll-view_H {
	margin-top: 30rpx;
	white-space: nowrap;
	width: 100%;
	height: 1100rpx;
}
.scroll-view-item_H {
	display: inline-block;
	width: 100%;
	height: 1100rpx;
	line-height: 1100rpx;
	text-align: center;
	padding: 30rpx;
}
.btnbottom {
	position: fixed;
	bottom: 0rpx;
	left: 0rpx;
	z-index: 999;
	background-color: #ffffff;
	padding-top: 30rpx;
	padding-bottom: 30rpx;
	width: 100%;
	text-align: center;
}
</style>
